<template>
    <div class=''>
      <button @click="coName='MyLeft'">MyLeft</button>
      <button @click="coName='MyRight'">MyRight</button>

      <!-- 动态组件：component -->
      <!-- keep-alive:所有动态组件都会保持现状，不会被销毁 -->
      <!-- include: 指定哪些组件被缓存，未指定的不用缓存 -->
      <keep-alive include="MyLeft">
        <component :is="coName"></component>
      </keep-alive>
    </div>
</template>


<script>
import MyLeft from '@/components/MyLeft.vue'
import MyRight from '@/components/MyRight.vue'
export default {
    name:'app',
    components: {
      MyLeft, MyRight
    },
    data() {
        return {
          coName:'MyLeft'
        }
    },
    computed: {},
    watch: {},
    methods: {

    },
}
</script>


<style scoped>

</style>